<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>涛宝商城-购物车</title>
<script th:src="@{appstyle/js/jquery-3.3.1.js}" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/core.css}" />
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/mdui.css}" />
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/bootstrap.min.css}" />
<script th:src="@{appstyle/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:src="@{appstyle/js/mdui.js}"></script>
</head>
<body>
	<div id="header">
		<p class="p1">涛宝商城,只有想不到,没有买不到!!!</p>
	</div>
	<div id="header_1">
		<div class="login">
			<div class="login_1">
							<input type="hidden" th:value="${session?.currentUser?.id}" id="userId" />
				<span class="span"> <a href="Land.html" class="span1" th:if="${session.currentUser==null}">登录</a>
				<div class="mdui-container"
						style="display: inline-block; position: absolute; top: -5px"
						th:if="${session.currentUser!=null}">
						<div class="mdui-chip">
							<img class="mdui-chip-icon"
								th:src="@{${session?.currentUser?.headpic}}" /> <span
								class="mdui-chip-title"
								th:text="${session?.currentUser?.username}"></span> <span
								class="mdui-chip-title"><i
								class="mdui-icon material-icons"
								mdui-tooltip="{content: '安全退出'}" onclick="clickLogout()">&#xe5cd;</i></span>
						</div>
					</div>
					<a href="register.html" class="span1" th:if="${session.currentUser==null}">注册</span>
				<ul class="ul1">
					<li class="li1"><a href="Shopping_Cart.html" class="a1">购物车(<span
							class="number">0</span>)
					</a></li>
					<li class="li1"><a href="orderMsg.html" class="a1">我的订单</a></li>
					<li class="li1"><a href="userMsg.html" class="a1">我的涛宝</a></li>
					<li class="li1"><a href="taobaostoreMsg.html" class="a1">关于涛宝</a></li>
				</ul>
			</div>
			<script type="text/javascript">
			clickLogout = function() {
				$.ajax({
					url : "user/logout.do",
					Type : "post",
					dataType : "json",
					success : function(data) {
						mdui.snackbar({
						    message: '成功安全退出!',
						    position: 'top',
						    timeout:300,
						    onClosed:function(){
						    	location.href="index.html";
						    }
					   });
					}
				})
			}
			</script>
		</div>
	</div>
	<div id="body">
		<a class="logo" href="index.html">涛宝商城</a>
		<div id="body-1">
			<input class="textinput" type="text" placeholder=请输入商品名称 /> <input
				type="button" class="button1" value="搜索	" />
		</div>
	</div>
	<hr />
	<div id="daohanglan">
		<span class="daohanglan_1"> <a href="index.html" class="a3">涛宝商城</a><span
			class="fuhao"> ></span> <a href="Shopping_Cart.html" class="a3">我的购物车</a>
		</span>
	</div>
	<div id="shopcar">
		<div id="toubu">
			<table id="cart_table" border="" cellspacing="" cellpadding="">
				<tr><th class="th1"><label><input type="checkbox" checked="checked" /> <span>全选</span></label></th><th class="th2"><span>商品信息</span></th><th class="th3"><span>单价</span></th><th class="th4"><span>数量</span></th><th class="th5"><span>合计</span></th><th class="th6"><span>操作</span></th></tr>
				<tr>
					<td class="th1">
					<label> <input type="checkbox" /></label>
					</td>
					<td class="th2"><span>商品信息</span></td>
					<td class="th3"><span>单价</span></td>
					<td class="th4"><span>数量</span></td>
					<td class="th5"><span>合计</span></td>
					<td class="th6"><span>操作</span></td>
				</tr>
			</table>
		</div>
		<div id="order_account"><span style='font-weight:700;'>商品总价格:<span id='productTotalPrice' style='font-size:20px;color: red;'>¥</span></span><button type='button' class='btn btn-danger' style='float: right;' id='settleBtn'>结算商品</button></div>
		<script type="text/javascript">
			$(document).ready(function(){
				cartList();
				function cartList(){
					$.ajax({
						url:"cart/list.do",
						Type:"post",
						data:"userId="+$("#userId").val(),
						dataType:"json",
						async:false,
						success:function(data){
							$("#order_account").show();
							$("#cart_table").empty();
							if(data.data.cartProductVoList.length==0){
								$("#order_account").hide();
								$("#toubu").append("<div><h1>您的购物车空荡荡的,快去购物吧!</h1></div>");
							}
							$("#cart_table").append("<tr><th class='th1'><label><input id='allPitch' type='checkbox' /><span>全选</span></label></th><th class='th2'><span>商品信息</span></th><th class='th3'><span>单价</span></th><th class='th4'><span>数量</span></th><th class='th5'><span>合计</span></th><th class='th6'><span>操作</span></th></tr>");
							if(data.data.allChecked == true){
								$("#allPitch").attr("checked","checked");
							}
							for(var i=0;i<data.data.cartProductVoList.length;i++){
								var checkedValue = "";
								if(data.data.cartProductVoList[i].productChecked == 1){
									checkedValue = "checked=checked";
								}
								$("#cart_table").append("<tr><input id='productId' type='hidden' value='"+data.data.cartProductVoList[i].productId+"'><th class='th1'><label><input type='checkbox' "+checkedValue+" /><img src='"+data.data.cartProductVoList[i].productMainImage+"' alt='商品图片'  width='82px' height='82px' ></label></th><th class='th2'><span>"+data.data.cartProductVoList[i].productName+"</span></th><th class='th3'><span>"+data.data.cartProductVoList[i].productPrice+"</span></th><th class='th4'><span>"+data.data.cartProductVoList[i].quantity+"</span></th><th class='th5'><span>"+data.data.cartProductVoList[i].productTotalPrice+"</span></th><th class='th6'><span><a class='link cart-delete' onclick='deleteCart("+data.data.cartProductVoList[i].productId+")'>删除</a></span></th></tr>");
							}
							$("#productTotalPrice").text("¥"+data.data.cartTotalPrice);
							// 点击改变购物车中商品的选中状态
							$("#cart_table").find("input").not("#allPitch").click(function(){
								var product_id = $(this).parents("tr").find("input:eq(0)").val();
								var flagNum = 0;
								if($(this).is(":checked")){
									flagNum = 1;
								}
								$.ajax({
									url:"cart/checked.do",
									Type:"post",
									async:false,
									data:{
										checkedStatus:flagNum,
										productId:product_id,
									},
									dataType:"json",
									success:function(data){
										if(data.status == 0){
											cartList();
										}
									}
								})
							});
							// 全单选或者反选
							$("#allPitch").click(function(){
								var flagNum = 0;
								if($(this).is(":checked")){
									flagNum = 1;
								}
								$.ajax({
									url:"cart/checkedAll.do",
									Type:"post",
									async:false,
									data:{
										checkedStatus:flagNum,
									},
									dataType:"json",
									success:function(data){
										if(data.status == 0){
											cartList();
										}
									}
								})
							});
							//结算商品
							$("#settleBtn").click(function(){
								var cartProductCount = 0;
								$("#cart_table").find("input[type='checkbox']").each(function(){
									if($(this).is(":checked")){
										// 说明购物车有选中的物品
										cartProductCount++;
									}
								})
								if(cartProductCount!=0){
									location.href = "order_affirm.html";
								}else{
									mdui.alert("你还没有选择任何商品哦!");
								}
							})
						}
					})
				}
				// 传入用户id以及其购买的商品id来删除
				deleteCart=function(productId){
                   $.ajax({
                	   url:"cart/delete.do",
                	   Type:"post",
                	   data:{
                		   productIds:productId,
                	   },
                	   dataType:"json",
                	   success:function(data){
                		   if(data.status == 0){
                			   cartList();
                		   }
                	   }
                   })
				}
				$("#serach_Btn").click(function(){
					location.href="product/toSerachPage.do?keyword="+$("#serach_Input").val();
				})
			})
			</script>
	</div>
	<style type="text/css">
			#left li {
				margin-top: 10px;
			}

			#left li a {
				position: relative;
				left: 300px;
				color: #A9A9A9;
				font-size: 14px;
				text-decoration: none;
			}

			.li1 a:hover {
				color: #66CCFF;
			}

			#rightPanel div {
				position: relative;
				left: 20px;
				margin-top: 15px;
				font-size: 14px;
				color: #666666;
			}
		</style>
</body>
</html>
